<template>
  <div>
    <router-view v-if="isLoadFinish" /> <!-- 路由视图 -->

    <div v-if="loading" class="loading"></div> <!-- 加载动画 -->

  </div>
</template>

<script lang="ts" setup>

import { ElLoading } from 'element-plus';
import { onMounted, ref } from 'vue';
import $kt from '@/vueKantboot';
import { useStore } from './stores/counter';

const loading = ref(true);
let isLoadFinish = ref(false);

let store = useStore()
store.languageCode = $kt.i18n.getLanguageCode(); 
let adminMenus = ref(null); 

/**
 * 开始加载页面
 * @name: loadStart
 * @description: 加载页面
 */
const loadStart = () => {
  var timer = setInterval(() => {
    const elLoading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.1)',
    });
    if (isLoadFinish.value) {
      elLoading.close();
      loading.value = false;
      window.clearInterval(timer);
    }
  }, 500)
}


onMounted(() => { // 页面加载完成
  loadStart(); // 开始加载页面
  isLoadFinish.value = true; // 加载完成
});

</script>

<style lang="scss">
html,
body {
  margin: 0;
  background-color: #f5f7fa;
  min-width: 700px;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background-color: aliceblue;
}

// 修改垂直滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
// 修改选中文字背景色
::selection {
  background: #409effaa;
  padding: 20px;
  color: #fff;
}

</style>
